<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title id="title">修德抄经堂</title>
    <link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/yuanwen.css">
    <link rel="stylesheet" type="text/css" href="../css/full.css">
    <script src="../bower_components/mui/dist/js/mui.min.js"></script>
    <script src="../bower_components/jquery/dist/jquery.js"></script>
</head>

<body>
    <div class="page">
        <div class="content">
            <h3 class="one_two">选择发愿文</h3>
            <div id="kuang">
                <!--<p class="dy_yuanwen">-->
                <!--愿过去佛，现在佛，未来佛，常说般若波罗蜜；愿一切受持者，比丘尼、信男、信女，所求如意，常行般若波罗蜜-->
                <!--</p>-->
                <!--<p class="dy_yuanwen">-->
                <!--愿过去佛，现在佛，未来佛，愿一切受持者，比丘尼、信男、信女，所求如意，常行般若波罗蜜-->
                <!--</p>-->
                <!--<p class="dy_yuanwen">-->
                <!--愿过去佛，现在佛，未来佛，常说般若波罗蜜；愿一切受持者，比丘尼、信男、信女，所求如意，常行般若波罗蜜-->
                <!--</p>-->
                <!--<p class="dy_yuanwen">-->
                <!--愿过去佛，现在佛，未来佛，常说般若波罗蜜；愿一切受持者，比丘尼、信男、信女，所求如意，常行般若波罗蜜-->
                <!--</p>-->
                <!--<p class="dy_yuanwen">-->
                <!--愿过去佛，现在佛，未来佛，常说般若波罗蜜；愿一切受持者，比丘尼、信男、信女，所求如意，常行般若波罗蜜-->
                <!--</p>-->
                <!--<p class="dy_yuanwen">-->
                <!--愿过去佛，现在佛，未来佛，常说般若波罗蜜；愿一切受持者，比丘尼、信男、信女，所求如意，常行般若波罗蜜-->
                <!--</p>-->
                <!--<p class="dy_yuanwen">-->
                <!--愿过去佛，现在佛，未来佛，常说般若波罗蜜；愿一切受持者，比丘尼、信男、信女，所求如意，常行般若波罗蜜-->
                <!--</p>-->
            </div>
            <div class="xian" style="margin-top: -10px;">
                <img class="img1" src="../img/btin.png" />
                <img class="img2" src="../img/benxin/xian.png" />
            </div>
            <div id="zidinyi">
                <h3 class="one_two">自定义发愿文</h3>
                <textarea id="area" placeholder="自定义发愿文，限五十字。" maxlength="100"></textarea>
            </div>

            <div id="btn">
                <a href="chaoxieer.html" id="commit">确认</a>
                <a href="chaoxieer.html" id="ignore">跳过</a>
            </div>
        </div>
    </div>
</body>
<script>
    var html = '';
    $.ajax({
        url: '/fe/transcript/vow_list',
        data: {
            "limit": 10,
            "offset": 0,
        },
        async: false,
        success: function(data) {
            var data = data.data;
            console.log(data)
            for (var i = 0, len = data.length; i < len; i++) {
                html += '<p class="dy_yuanwen">' + data[i] + '</p>';
            }
            $('#kuang').append(html);
            var height = $('.dy_yuanwen').height() + 21;
            var page = $('.dy_yuanwen').length;
            if (page <= 6) {
                $('#kuang').height(height * page);
                $('.xian').hide();
            } else {
                $('#kuang').height(height * 6);
                $('.xian').show();
            }
        }
    })

    var str = "";
    $('.dy_yuanwen').click(function() {
        $('.dy_yuanwen').removeClass('active');
        $(this).addClass('active');
        str = $(this).text();
        a = str.replace(/(^\s*)|(\s*$)/g, '');
        $("#area").val(a);
        $("#area").css('color', "#c9b231");
    });

    $('#commit').click(function(e) {
        e.preventDefault();
        var text = $('#area').val();
        if (text == '') {
            alert('请选择或输入发愿文');
        } else {
            // var vId = localStorage.getItem('versionId');
            var userTranscriptionID = localStorage.getItem('userTranscriptionID');
            postText(userTranscriptionID, text);
        }
    });

    function getCookie(name) {
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr != null) return unescape(arr[2]);
        return null;
    }

    function postText(id, text) {
        var csrftoken = getCookie('csrftoken');
        $.ajax({
            url: '/fe/transcript/user_transcription/' + id + '/vow',
            type: 'PUT',
            beforeSend: function(xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            },
            data: {
                "vow_text": text,
            },
            success: function(data) {
                location.href = 'chaoxieer.html';
            }

        })
    }
</script>

</html>
